

var AppRecView = Backbone.View.extend({
    el:$('#appdownload'),
    template: _.template(templateLoader["appdownload"]),
    events:{
        "click .menuoption":"navSelect"
    },
    initialize:function(){
        this.wrapperLR;
        this.listenTo(this.collection , "add" , this.render);
    },
    render:function(model){
        this.$el.html(this.template(model.toJSON()));
        var screenWidth = window.screen.width; //窗口宽度
        var childLi = $('#downContent ul li');
        childLi.width(193);
        var marginWdith = parseInt(childLi.css('marginRight'))*(childLi.length-1);
        var borderWidth = parseInt(childLi.css("borderWidth"))*childLi.length*2;
        var downContentPaddingWidth = parseInt($('#downContent').css("paddingLeft"))*2;
        var tempWidth = marginWdith + borderWidth + borderWidth;
        $('#wrapper ul').width(childLi.width()*childLi.length+tempWidth);
        this.loadedScroll();
       return this;
    },
    loadedScroll:function(){
        var xx,yy,XX,YY,swipeX,swipeY ;
        document.getElementById('wrapper').addEventListener('touchstart',function(event){
            xx = event.targetTouches[0].screenX ;
            yy = event.targetTouches[0].screenY ;
            swipeX = true;
            swipeY = true;
        });
        document.getElementById('wrapper').addEventListener('touchmove',function(event){
            XX = event.targetTouches[0].screenX ;
            YY = event.targetTouches[0].screenY ;
            if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0)  //左右滑动
            {

                event.preventDefault();//阻止浏览器默认事件
                swipeY = false ;
                //左右滑动
            }
            else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){  //上下滑动
                swipeX = false ;
                //上下滑动，使用浏览器默认的上下滑动
            }
        });

        setTimeout(function() {
            this.wrapperLR = new iScroll('wrapper', {
                vScroll: false,
                vScrollbar: false,
                hScrollbar: false,
                onBeforeScrollStart: function (event) {

                },
                onBeforeScrollEnd:function(event){
                    if(this.x > 0) {
                        event.preventDefault();
                    }
                }
            });
        },100);


    },
    navSelect:function(event){

        var _this = $(event.target);
        if(!_this.hasClass('menuoption')){
            _this = _this.parents('.menuoption');
        }
        this.contentPage = $('.contentPage');
        this.donwNavA = $('#downNav a');
        this.contentPage.addClass('none');
        $(_this.attr('iid')).removeClass('none');
        this.donwNavA.removeClass('downNavOn');
        _this.addClass('downNavOn');
    }
});
var appRecView = new AppRecView({collection:appRecCollectioin});